<template>
	<view>
		<xpx-loading :show="loading"></xpx-loading>
		<view class="box">
			<view class="mt35 re pl40 pr40" style="z-index: 2;">
				<view class="m_area_block_1">
					<view class="df aic jcsb hp100">
						<view class="">单次消耗积分：<text class="ml10 cor_19E">{{data.search_image_price}}</text></view>
						<view class="">当前剩余积分：<text class="ml10 cor_19E">{{data.my_integral}}</text></view>
					</view>
					<view class="df aic jcsb hp100 mt20">
						<view class="">可查询次数：<text class="ml10 cor_19E">{{data.num}}</text></view>
						<view  @click="toJf()" class=""><text class="ml10 cor_19E">获取积分</text></view>
					</view>
				</view>
				<view class="mt30 m_area_block_2" @click="selectImage">
					<view class="frame_btn">点击<br />拍照查价
					</view>
					<image style="width: 228rpx;height: 228rpx;"
						src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/quan_daa.png"
						class="frame_bg quan_1" alt="" />
					<image style="width: 192rpx;height: 192rpx;"
						src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/quan_da.png"
						class="frame_bg quan_2" alt="" />
				</view>

				<view class="mt30 m_area_block_3">
					<view class="fs32 lh52 tac fwb cor_000">请尽量拍摄手机背面，特征明显的一面</view>
					<view class="mt35 df jcsb">

						<view class="tac">
							<image
								src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/example_pic_1.png"
								class="example_pic_1"></image>
							<view class="mt25">
								<image
									src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/icon_ex_1.png"
									class="icon_ex_size"></image>
							</view>
						</view>

						<view class="tac">
							<image
								src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/example_pic_2.png"
								class="example_pic_1"></image>
							<view class="mt25">
								<image
									src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/icon_ex_2.png"
									class="icon_ex_size"></image>
							</view>
						</view>

					</view>
				</view>

				<view class="mt30 m_area_block_4">
					<view class="df aic">
						<view class="line_ver_cor"></view>
						<view class="ml15 fs32 lh52 fwb cor_000">识图记录</view>
					</view>
					<view class="record_list">

						<view class="item_record" @click="toDetail(item.id)" v-for="(item,index) in data.log">
							<view class="flex_box aic">
								<image :src="item.image" class="mr15 cord_img_size"></image>
								<view class="item">
									<view class="fs28 fwb cor_000">{{item.create_time}}</view>
								</view>
								<image
									src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/icon_view_results.png"
									class="view_results_btn"></image>
							</view>
						</view>

					</view>
				</view>

			</view>

			<image src="https://offer-1318401590.cos.ap-guangzhou.myqcloud.com/mpstatus/phs/icon_top_bg.png"
				class="top_bg_pos"></image>

		</view><!-- box -->
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app'
	import { getToken } from '@/utils/auth'
	import { reactive, ref } from 'vue'

	import { imgSearch, imgSearchInfo } from '@/api/product'


	const data = reactive({
		log: [],
		num: 0,
		my_integral: 0,
		search_image_price: 0,
	})

	const loading = ref(true);

	const getInfo = async () => {
		let res = await imgSearchInfo({});
		data.log = res.log;
		data.my_integral = res.my_integral;
		data.num = res.num;
		data.search_image_price = res.search_image_price;
		loading.value = false;
	}
	onShow(() => {
		getInfo();
	})
	const toJf = () => {
		uni.navigateTo({
			url:'/packages/jifen_wallet/jifen_wallet',
		})
	}
	const toDetail = (id:any) => {
		uni.navigateTo({
			url:'/pages/image_search/image_search_res?id=' + id,
		})
	}
	const selectImage = () => {
		let baseURL = `${import.meta.env.VITE_APP_BASE_URL || ''}/`;
		let action = baseURL + '/api/upload/image';
		let token = getToken();
		uni.chooseImage({
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				uni.uploadFile({
					url: action, //仅为示例，非真实的接口地址
					filePath: tempFilePaths[0],
					name: 'file',
					header: {
						'token': token
					},
					success: (uploadFileRes) => {
						loading.value = true;
						let body = JSON.parse(uploadFileRes.data)
						imgSearch({ image: body.data.uri }).then(res => {
							loading.value = false;
							console.log("asdasdas",res);
							if (res.status == 'error') {
								uni.navigateTo({
									url: `/pages/image_search/res_error?msg=${res.msg}`
								})
							}else{
								uni.navigateTo({
									url: `/pages/image_search/image_search_res?id=${res.id}`
								})
							}

						}).catch(() => {
							loading.value = false;
						})
					}
				});
			}
		});

	}
</script>

<style>
	page {
		background: #F4F8F9;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.navbar {
		background: transparent;
	}

	.curnav.navbar {
		background: #fff;
	}

	.lh52 {
		line-height: 52rpx;
	}

	.top_bg_pos {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 486rpx;
		z-index: 1;
	}

	.m_area_block_1 {
		position: relative;
		padding: 32rpx;
		font-size: 28rpx;
		color: #939393;
		background: #FFFFFF;
		box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(5, 8, 40, 0.03);
		border-radius: 24rpx;
	}

	.m_area_block_2 {
		position: relative;
		display: flex;
		height: 264rpx;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #12E39F 0%, #96EA1A 100%);
		border-radius: 24rpx;
	}

	.m_area_block_2 image {
		position: absolute;
		left: center;
	}

	@keyframes load8 {
		0% {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@keyframes load {
		0% {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(-360deg);
		}
	}

	.quan_1 {
		animation: load8 3.0s infinite linear;
	}

	.quan_2 {
		animation: load 3.0s infinite linear;
	}

	.m_area_block_3 {
		position: relative;
		padding: 40rpx 40rpx 32rpx;
		background: #fff;
		border-radius: 24rpx;
	}

	.m_area_block_4 {
		position: relative;
		padding: 40rpx 40rpx 6rpx;
		background: #fff;
		border-radius: 24rpx;
	}



	.m_area_block_2 .frame_btn {
		position: absolute;
		top: 50%;
		left: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 131rpx;
		height: 131rpx;
		font-size: 28rpx;
		line-height: 34rpx;
		color: #43E66F;
		background: #fff;
		border-radius: 50%;
		z-index: 2;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
	}

	.example_pic_1 {
		width: 280rpx;
		height: 610rpx;
	}

	.icon_ex_size {
		width: 60rpx;
		height: 60rpx;
	}

	.line_ver_cor {
		position: relative;
		width: 8rpx;
		height: 36rpx;
		background: linear-gradient(180deg, #12E39F 0%, #96EA1A 100%);
		border-radius: 4rpx;
	}

	.record_list .item_record {
		position: relative;
		padding: 32rpx 0;
		border-bottom: 2rpx solid #ECECEC;
	}

	.record_list .item_record:last-child {
		border-bottom: 0;
	}

	.cord_img_size {
		width: 88rpx;
		height: 88rpx;
		border-radius: 12rpx;
		vertical-align: top;
	}

	.view_results_btn {
		position: relative;
		width: 144rpx;
		height: 56rpx;
	}
</style>